<template>
  <div class="con-classification">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>空气湿度</span>
      </div>
      <div class="fication humidity">
        <div id="humidity" :style="{ width: '500px', height: '250px' }"></div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>光照</span>
      </div>
      <div class="fication illumination">
        <div
          id="illumination"
          :style="{ width: '500px', height: '250px' }"
        ></div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>气压</span>
      </div>
      <div class="fication pressure">
        <div id="pressure" :style="{ width: '500px', height: '250px' }"></div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>土壤湿度</span>
      </div>
      <div class="fication soil">
        <div id="soil" :style="{ width: '500px', height: '250px' }"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
//调用后台接口
import { $sensorCount } from "@/api/index.js";
export default {
  name: "Classification",
  mounted() {
    $sensorCount().then((res) => {
      this.drawLine(res.data.data);
      this.option(res.data.data);
      this.Nanding(res.data.data);
      this.soil(res.data.data);
    });
  },
  methods: {
    drawLine(data) {
      //基于准备好的dmo,初始化echarts实例
      let illumination = this.$echarts.init(
        document.getElementById("illumination")
      );
      //绘制图表
      illumination.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.beam,
            type: "bar"
          },
        ],
      });
    },
    option(data) {
      var humidity = this.$echarts.init(document.getElementById("humidity"));
      //绘制图表
      humidity.setOption({
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Web", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: data.air,
            smooth: true,
          },
        ],
      });
    },
    Nanding(data) {
      var pressure = this.$echarts.init(document.getElementById("pressure"));
      //绘制图表
      pressure.setOption({
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [10, 70],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 7,
            },
            data: data.pressure,
          },
        ],
      });
    },
    soil(data) {
      var soil = this.$echarts.init(document.getElementById("soil"));
      //绘制图表
      soil.setOption({
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Web", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: data.soil,
            smooth: true,
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.con-classification {
  margin-top: 10px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .box-card {
    width: 49.5%;
    margin-top: 10px;
  }
  .box-card:nth-child(3),
  .box-card:nth-child(4) {
    margin-bottom: 0px;
  }
  .fication {
    width: 49.5%;
    height: 230px;
    background: #fff;
    border-radius: 10px;
    margin-top: 10px;
  }
  .pressure {
    margin-right: 20px;
  }
}
</style>